import React, {
  Component,
  PropTypes
} from 'react';

import './Input.scss';



export default class Input extends Component {

  static CLASS = {
    DEFAULT: 'form-input',
    HOVER: 'hover',
    FOCUS: 'focus'
  };
  constructor(props) {
    super(props);
    const { value } = props;
    this.state = {
      value: value || ''
    };
    this._onInput = this._onInput.bind(this);
  }

  _onInput(e) {
    const { value } = e.target
    // @TODO 增加校验
    this.setState({
      value: value
    });
    const { onValueChange } = this.props;
    if (typeof onValueChange === 'function') {
      onValueChange(value);
    }
  }

  // @TODO 改变当前状态
  _changeFocusClass(bFocus) {

  }

  render() {
    const { htmlType, className, id } = this.props;
    const { value } = this.state;
    let classes = [Input.CLASS.DEFAULT];
    if (className) {
      classes.push(className);
    }
    return (
      <input
        className={ classes.join(' ') }
        type={htmlType}
        value={value}
        id={id}
        onInput={this._onInput}
        onMouseOver={this._changeFocusClass.bind(this, true)}
        onMouseOut={this._changeFocusClass.bind(this, false)}
        />
    )
  }
}

/**
 * @prop {funciton} onValueChange - 当input输入时回调函数
 * @prop {string} value           - 需要显示的默认value
 * @prop {string} type            - 对应的html input类型:type、text、number等
 * @type {Object}
 */
Input.PropTypes = {
  value: PropTypes.string,
  type: PropTypes.string.isRequired,
  onValueChange: PropTypes.func,
};
